<!--demo4-1-->
<!--template>
  <div>
    <count-com></count-com>  
    <count-com/>
  </div>
</!--template>
<script></script>
<style-- scoped></style-->


<!--demo4-2-->
<!--template>
  <div>
    <NumberCom/>
    <NumberCom/>
  </div>
</template>
<script>
    import NumberCom from './components/NumberCom.vue'
    export default{
      components:{
        NumberCom
      },
    }
</script>
<style scoped></style-->


<!--demo4-3-->
<!--template>
  <div>
   <HelloCom name="Jim"></HelloCom>
   <HelloCom name="Lily"></HelloCom>
   <HelloCom name="Bob"></HelloCom>
  </div>
</template>
<script>
    import HelloCom from "./components/HelloCom.vue";
    export default{
      components:{
        HelloCom,
      },
    };
</script>
<style-- scoped></style-->


<!--demo4-4-->
<!--template>
  <div>
   <input type="radio" v-model="activeCompoment"value="ActiveCom1"/>ActiveCm1
    <input type="radio" v-model="activeCompoment"value="ActiveCom2"/>ActiveCm2
   <keep-alive>
    <component :is="activeCompoment"></component>
    </keep-alive>
  </div>
</template>
<script>
    import ActiveCom1 from "./components/ActiveCom1.vue";
    import ActiveCom2 from "./components/ActiveCom2.vue";
    export default{
      data() {
        return {
           activeCompoment:"ActiveCom2",
        };
      },
    components:{
      ActiveCom1,
      ActiveCom2,
    },
  };
</script>
<style scoped></style-->


<!--demo4-5-->
<!--template>
  <div>
    <Suspense>
      <template v-slot:default>
        <AsyncCom></AsyncCom>
      </template>
      <template v-slot:fallback>
        <h2>LOADING......</h2>
      </template>
    </Suspense>
  </div>
</template>
<script>
import{ defineAsyncComponent } from 'vue'
    const AsyncCom=defineAsyncComponent(
      ()=>import("./components/HelloCom1.vue")
    )

    export default{
      components:{
        AsyncCom
      }
    }
</script>
<style-- scoped></style-->


<!--demo4-6-->
<!--template>
  <div>
      <button @click="currentTab='Tab1'">音乐</button>
      <button @click="currentTab='Tab2'">视频</button>
      <button @click="currentTab='Tab3'">新闻</button>
      <keep-alive>
    <component :is="currentTab"></component>
    </keep-alive>
  </div>
</!--template>
<script>
  import Tab1 from "./components/TabCom1.vue";
  import Tab2 from "./components/TabCom2.vue";
  import Tab3 from "./components/TabCom3.vue";
  export default{
    data() {
      return {
        currentTab:"Tab1",
      };
    },
    components:{
      Tab1,
      Tab2,
      Tab3,
    },
  };
</script>
<style-- scoped></style-->


<!--demo4-7-->
<!--template>
  <div>
    <ChildCom msg="Hello,I am dad!"></ChildCom>
  </div>
</!--template>
<script>
import ChildCom from './components/ChildCom.vue';
export default{
  components:{
    ChildCom
  }
};
</script>
<style scoped></style-->


<!--demo4-8-->
<!--template>
  <div>
    <!--ChildCom1 name="name" age="age"></!--ChildCom1--
    <ChildCom1 :name="name" :age="age"></ChildCom1>
  </div>
</template>
<script>
import ChildCom1 from './components/ChildCom1.vue';
import MyCom1 from './components/MyCom1.vue';
export default{
data() {
  return {
    name:'Jim',
    age:[],
    gender:'',
    hobby:[]
  }
},
components
  ChildCom1
}
  }
</script>
<style scoped></style-->


<!--demo4-9-->
<!--template>
  <div>
    <ChildCom1 :name="name" :age="age"></ChildCom1>
    <MyCom1 :parentMsg="msg"></MyCom1>
    <MyCom2 :childWidth="width"></MyCom2>
  </div>
</template>
<script>
import ChildCom1 from "./components/ChildCom1.vue";
import MyCom1 from "./components/MyCom1.vue"
import MyCom2 from "./components/MyCom2.vue"
  export default{
    data() {
      return {
        name:'Jim',
        age:[],
        gender:'',
        hobby:[],
        width:400,
        msg:'父组件的msg'
      }
    },
    components:{
      ChildCom1,
      MyCom1,
      MyCom2,
    }
  }
</script>
<style scoped></style-->


<!--demo4-10-->
<!--template>
  <div>
<ChildCom2 @score="scoreHandler"></ChildCom2>
  </div>
</template>
<script>
import ChildCom2 from './components/ChildCom2.vue';
export default{
  components:{
    ChildCom2
  },
  methods:{
    scoreHandler(arg1,arg2){
      console.log(arg1,arg2);
    }
  }
};
</script>
<style scoped></style-->


<!--demo4-11-->
<!--template>
  <div>
<ChildCom3 ref="childRef"></ChildCom3>
<button @click ="sendMessage">Send Message To Child</button>
  </div>
</template>
<script>
import ChildCom3 from './components/ChildCom3.vue';
export default{
  components:{
    ChildCom3
  },
  methods:{
    sendMessage(){
      this.$refs.childRef.receiveMessage('Hello from parent');
    }
  }
};
</script>
<style scoped></style-->


<!--demo4-12-->
<!--template>
  <div>
  <ChildCom4 v-model="msg" />{{msg}}
  </div>
</!--template>
<script>
import ChildCom4 from './components/ChildCom4.vue'
export default{
  data() {
    return {
      msg:''
    }
  },
  components:{
   ChildCom4
  }
};
</script>
<style></style-->


<!--demo4-13-->
<template >
    <div>
        <ChildCom5></ChildCom5>
    </div>
</template>
<script>
import ChildCom5 from './components/ChildCom5.vue';
export default {
    components:{
      ChildCom5
    },
    provide:{
        message:'Hello from parent'
    }
}
</script>
<style ></style>


<!--demo4-14-->
<!--template>
    <div class="container">
        <div class="left">
          <CategoryCom @category="categoryHandler"/>
        </div>
        <div class="right">
          <ListCom :books="list"/>
        </div>
    </div>
</template>
<script>
import CategoryCom from './components/CategoryCom.vue';
import ListCom from './components/ListCom.vue';
export default {
    data() {
      return {
        books:[
          {
            id:"b001",
            cid:1,
            name:"《鲁迅全集》"
          },
            {
            id:"b002",
            cid:1,
            name:"《埃及神话》"
          },
            {
            id:"b003",
            cid:2,
            name:"《经济学的诡计》"
          },
            {
            id:"b004",
            cid:3,
            name:"《大话中国艺术史》"
          },
            {
            id:"b005",
            cid:3,
            name:"《敦煌艺术通识课》"
          },
        ],
        list:[]
      };
    },
    mounted() {
      this.list=this.books.slice();
    },
    components:{
      CategoryCom,
      ListCom,
    },
    methods: {
      categoryHandler(cid){
        this.list=this.books.filter(book=>book.cid===cid);
      }
    },
}
</script>
<style >
.container {
  overflow: hidden;
  width: 600px;
}
.container .left,
.container .right {
  float: left;
  margin-bottom: -10000px;
  padding-bottom: 10000px;
}
.container .left {
  width: 20%;
  background: rgb(237, 228, 229);
}
.container .right {
  align-content: left;
  width: 80%;
  background: rgb(205, 222, 245);
}
</style-->